<template>
    <div  class="chart-container" style="height: 1200px; background-color: #f6f6f6"></div>
</template>

<script>
// https://github.com/bumbeishvili/org-chart
// npm i d3-org-chart
import { OrgChart } from 'd3-org-chart';

import { getD3data } from '@/utils/d3.data'

// // 引入d3
// import * as d3 from 'd3';

export default {
    data() {
        return {
            data : [{

            }]
        }
    },
    methods: {
        draw(dataFlattened) {
            
            const chart = new OrgChart()
                .container('.chart-container')
                .data(dataFlattened)
                .nodeWidth((d) => 250)
                .initialZoom(0.7)
                .nodeHeight((d) => 175)
                .childrenMargin((d) => 40)
                .compactMarginBetween((d) => 15)
                .compactMarginPair((d) => 80)
                .nodeContent(function (d, i, arr, state) {
                    return `
                    <div style="padding-top:30px;background-color:none;margin-left:1px;height:${
                    d.height
                    }px;border-radius:2px;overflow:visible">
                    <div style="height:${
                        d.height - 32
                    }px;padding-top:0px;background-color:white;border:1px solid lightgray;">

                        <img src=" ${
                        d.data.imageUrl
                        }" style="margin-top:-30px;margin-left:${d.width / 2 - 30}px;border-radius:100px;width:60px;height:60px;" />

                    <div style="margin-right:10px;margin-top:15px;float:right">${
                        d.data.id
                    }</div>
                    
                    <div style="margin-top:-30px;background-color:#3AB6E3;height:10px;width:${
                        d.width - 2
                    }px;border-radius:1px"></div>

                    <div style="padding:20px; padding-top:35px;text-align:center">
                        <div style="color:#111672;font-size:16px;font-weight:bold"> ${
                            d.data.name
                        } </div>
                        <div style="color:#404040;font-size:16px;margin-top:4px"> ${
                            d.data.positionName
                        } </div>
                    </div> 
                    <div style="display:flex;justify-content:space-between;padding-left:15px;padding-right:15px;">
                        <div > Manages:  ${d.data._directSubordinates} 👤</div>  
                        <div > Oversees: ${d.data._totalSubordinates} 👤</div>    
                    </div>
                    </div>     
            </div>
        `;
                })
                .render();
      
        }
    },
    mounted() {
        const dataFlattened = [
            {
                name: "Ian Devling",
                imageUrl: "https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/cto.jpg",
                area: "Corporate",
                profileUrl: "http://example.com/employee/profile",
                office: "CTO office",
                tags: "cto",
                isLoggedUser: false,
                positionName: "xxx",
                id: "O-6066",
                parentId: "",
                size:""
            },
            {
                name: "Ian Devling",
                imageUrl: "https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/cto.jpg",
                area: "Corporate",
                profileUrl: "http://example.com/employee/profile",
                office: "CTO office",
                tags: "cto",
                isLoggedUser: false,
                positionName: "xxx",
                id: "O-6067",
                parentId: "O-6066",
                size:""
            },
            {
                name: "Ian Devling",
                imageUrl: "https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/cto.jpg",
                area: "Corporate",
                profileUrl: "http://example.com/employee/profile",
                office: "CTO office",
                tags: "cto",
                isLoggedUser: false,
                positionName: "xxx",
                id: "O-6068",
                parentId: "O-6066",
                size:""
            }              
    ];
        this.draw(getD3data());
    }

}
</script>

<style>
      /* body {
        background-color: #000c0e;
      } */

      .btn {
        margin: 3px;
        color: inherit;
        text-transform: uppercase;
        word-wrap: break-word;
        white-space: normal;
        cursor: pointer;
        border: 0;
        border-radius: 0.125rem;
        -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%),
          0 2px 10px 0 rgb(0 0 0 / 12%);
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
        -webkit-transition: color 0.15s ease-in-out,
          background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
          -webkit-box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
          -webkit-box-shadow 0.15s ease-in-out;
        padding: 0.84rem 2.14rem;
        font-size: 0.81rem;
        display: inline-block;
        font-weight: 400;
        color: #212529;
        text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.25rem;
      }

      .btn-action-button {
        text-transform: lowercase;
        font-size: 11px !important;
        border-radius: 7px !important;
        color: white !important;
        padding: 4px 5px !important;
        background-color: #1d2643 !important;
      }

      .action-buttons {
        position: absolute;
        bottom: 10px;
        right: 35px;
      }

      .svg-chart-container:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: radial-gradient(circle at center, #04192b 0, #000b0e 100%);
      }
</style>